<template>
  <div class="page">
    <Container header>
      <template #left>
        <n-button type="primary" @click="handleAddClick"> 添加 </n-button>
      </template>
      <n-data-table
        :columns="tableColumns"
        :data="tableUse.table.data"
        :loading="tableUse.table.loading"
        :bordered="true"
      />
      <Pager :pagination="pageUse" />
    </Container>
    <FormDialog />
  </div>
</template>

<script setup>
import { useTable, usePage, useForm } from "@/hooks";
import api from "@/http/api";
import {
  ADMIN_TYPE_LIST,
  ADMIN_TYPE_CHANGE,
  ADMIN_TYPE_DELETE,
} from "@/http/url";
import FormDialog from "./formDialog.vue";

// 表格 ----------- start
const tableUse = useTable();

const tableColumns = [
  { key: "title", title: "标题" },
  // { key: "description", title: "描述" },
  { key: "slug", title: "Slug" },
  tableUse.options([
    {
      type: "primary",
      label: "修改",
      onClick: handleChangeClick,
    },
    {
      type: "error",
      label: "删除",
      onClick: handleDeleteClick,
    },
  ]),
];

// 添加
function handleAddClick() {
  formUse.toggleForm("add", {
    // 表单默认值
  });
}

// 删除
function handleDeleteClick(row) {
  //
  const d = window.$dialog.warning({
    title: "温馨提示",
    content: `是否删除分类`,
    positiveText: "确认",
    positiveButtonProps: {
      type: "error",
    },
    onPositiveClick: () => {
      d.loading = true;
      api
        .delete(ADMIN_TYPE_DELETE(row.id))
        .then(({ ok, message }) => {
          d.loading = false;
          if (ok) {
            window.$msg.success(message);
            initData();
          } else {
            window.$msg.warning(message);
          }
        })
        .catch((e) => {
          d.loading = false;
          window.$msg.error(e);
        });
    },
  });
}

// 修改
function handleChangeClick(row) {
  formUse.toggleForm("edit", row);
}

// 分页
const pageUse = usePage(initData);

// 表格 ----------- end

// 表单 ----------- start
const formUse = useForm();
provide("NIL_FORM", formUse);

formUse.listener.onSave = (method, items) => {
  formUse.form.loading = true;
  const methodMap = { add: "post", edit: "put" };
  api[methodMap[method]](ADMIN_TYPE_CHANGE, items)
    .then((res) => {
      if (res.ok) {
        window.$msg.success(res.message);
        formUse.toggleForm();
        initData();
      } else {
        window.$msg.warning(res.message);
      }
    })
    .finally(() => {
      formUse.form.loading = false;
    });
};
// 表单 ----------- end

// 获取数据
function initData() {
  tableUse.table.loading = true;
  api
    .get(ADMIN_TYPE_LIST, {})
    .then(({ ok, data, message }) => {
      if (ok) {
        tableUse.loadData(data ?? []);
      } else {
        window.$msg.warning(message);
      }
    })
    .finally(() => {
      tableUse.table.loading = false;
    });
}

// 页面加载完成
onMounted(() => {
  initData();
});
</script>

<style lang="scss" scoped></style>
